<!-- 页面  -->
<template>
	<view class="page-container">
		<view class="container-box">
		<!-- 分类标签栏 - 横向滚动 -->
		<scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false">
			<view class="category-tabs">
				<view class="category-tab" 
					v-for="(item,index) in props.data.children[activeMenu].children" 
					:key="item.id"
					@click="handleTab(item,index)">
					<view :class="state.tabIndex==index?'tab-text tab-textActive category-tab':'category-tab tab-text'">{{ item.name }}</view>
				</view>
			</view>
			
		</scroll-view>
		
		<!-- 分类标题 - 显示在标签下方 -->
		<view class="category-header">
			<view class="category-title">{{ getCategoryTitle() }}</view>
		</view>

		<!-- 商品内容区域 -->
		<view class="content-area">
			<!-- 商品列表 -->
			<view class="goods-list" v-if="state.pagination.data.length > 0">
				<view class="ss-flex flex-wrap">
					<view class="goods-box" v-for="item in state.pagination.data" :key="item.id">
						<view>
							<view class="goods-img" @click="handleGoodsClick(item)">
								<image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFit"></image>
							</view>
							<view class="goods-content">
								<view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
								<view class="flex-center">
									<view class="price-container">
										<!-- 共富会员：显示会员价和原价（original_price） -->
										<view v-if="state.userInfo && state.userInfo.level == 2" class="goods-price">
											￥{{ item.vip_price || (item.price ? item.price[0] : '暂无价格') }}
										</view>
										<view v-if="state.userInfo && state.userInfo.level == 2 && item.vip_price && item.original_price" class="original-price">
											￥{{ item.original_price }}
										</view>
										
										<!-- 优惠会员：显示会员价和原价（original_price） -->
										<view v-if="state.userInfo && state.userInfo.level == 1" class="goods-price">
											￥{{ item.vip_price || (item.price ? item.price[0] : '暂无价格') }}
										</view>
										<view v-if="state.userInfo && state.userInfo.level == 1 && item.vip_price && item.original_price" class="original-price">
											￥{{ item.original_price }}
										</view>
										
										<!-- 注册会员：只显示一个价格 -->
										<view v-if="state.userInfo && state.userInfo.level == 0" class="goods-price">
											￥{{ item.price ? item.price[0] : '暂无价格' }}
										</view>
									</view>
									<view class="title-flex" @click="handleAdd(item.id)">
										<image mode="widthFix" class="add-img" :src="state.addShop"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top-fixed" v-show="state.showBack && !state.showSelectSku" @click="goTop">
					<image :src="state.backTop" mode="aspectFit" class="backTop-img"></image>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-status" v-if="state.loadStatus === 'loading'">
				<view class="loading-box">
					<view class="loading-spinner"></view>
					<text>正在加载商品...</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="state.pagination.data.length === 0 && state.loadStatus === 'noMore'">
				<view class="empty-text">暂无数据</view>
			</view>

						<!-- 错误状态 -->
			<view class="error-state" v-if="state.loadStatus === 'error'">
				<view class="error-icon">❌</view>
				<view class="error-text">加载失败</view>
				<view class="error-desc">网络异常，请稍后重试</view>
				<view class="retry-btn" @click="handleRetryLoad()">重新加载</view>
			</view>
		</view>

		</view>

		
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { onLoad, onShow, onPageScroll, onShareAppMessage, onMounted } from '@dcloudio/uni-app';
	import { reactive,computed,ref, watchEffect, watch } from 'vue';
	import { formatSales, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods';
	import detailCellSku from './detail/detail-cell-sku.vue';
	import detailCellService from './detail/detail-cell-service.vue';
	import detailCellParams from './detail/detail-cell-params.vue';
	import detailTabbar from './detail/detail-tabbar.vue';
	import detailSkeleton from './detail/detail-skeleton.vue';
	import detailCommentCard from './detail/detail-comment-card.vue';
	import detailContentCard from './detail/detail-content-card.vue';
	import detailActivityTip from './detail/detail-activity-tip.vue';
	import skuPopup from './sku-popup.vue';
	import { isEmpty } from 'lodash';
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		activeMenu: [Number, String],
		pagination: Object,
	});

	const state = reactive({
		tabIndex: 0,
		categoryId: '',
		loadStatus: '',
		pagination: {
			data: [],
			current_page: 1,
			total: 0,
			last_page: 1,
		},
		addShop:'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/add.png',
		goodsId: 0,
		skeletonLoading: true,
		goodsInfo: {},
		goodsSwiper: [],
		showModel: false,
		total: 0,
		couponInfo: [],
		showActivityModel: false,
		activityInfo: [],
		gift: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/gift.png',
		goldenBean: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/goldenBean.png',
		downloadIcon: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/downloadIcon.png',
		shareIcon: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/shareIcon.png',
		isGift: '0',
		userInfo: {},
		backTop: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/backTop.png',
		showBack:false
	});

	
	// 返回顶部方法
	const goTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	};
	// 切换分类标签
	const handleTab = (item, index) => {
		state.tabIndex = index
		state.categoryId = item.id
		getList()
	}

	// 获取分类标题
	const getCategoryTitle = () => {
		try {
			if (!props.data || !props.data.children || 
				props.activeMenu === undefined || props.activeMenu === null) {
				return '居家内衣'
			}
			
			const menuData = props.data.children[props.activeMenu]
			if (!menuData || !menuData.children ||
				!Array.isArray(menuData.children) || menuData.children.length === 0) {
				return menuData?.name || '居家内衣'
			}
			
			// 获取当前选中的分类名称
			const selectedCategory = menuData.children[state.tabIndex]
			if (selectedCategory && selectedCategory.name) {
				return selectedCategory.name
			}
			
			// 如果没有选中分类，返回主分类名称
			return menuData.name || '居家内衣'
		} catch (error) {
			console.error('获取分类标题失败:', error)
			return '居家内衣'
		}
	}

	// 商品点击事件
	const handleGoodsClick = (item) => {
		try {
			console.log('点击商品:', item);

			// 直接跳转到商品详情页面，不检查登录状态
			uni.navigateTo({
				url: `/subPackages/goods/index?id=${item.id}`
			});

		} catch (error) {
			console.error('商品点击处理时发生错误:', error);
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			});
		}
	}


	// 重试加载
	const handleRetryLoad = () => {
		getList()
	}

	// 页面滚动监听
	onPageScroll((e) => {
		// 当滚动距离超过500rpx时显示返回顶部按钮
		if (e.scrollTop > 500) {
			state.showBack = true;
		} else {
			state.showBack = false;
		}
	});

	// 监听SKU弹框状态，控制返回按钮显示
	watch(() => state.showSelectSku, (newVal) => {
		if (newVal) {
			// 当SKU弹框打开时隐藏返回按钮
			state.showBack = false;
		}
	});

	// 监听左侧分类变化，重置右侧小分类为第一个
	watch(() => props.activeMenu, (newVal, oldVal) => {
		if (newVal !== oldVal && newVal !== undefined && newVal !== null) {
			// 左侧分类切换时，重置右侧小分类索引为0
			state.tabIndex = 0;
			// 清空商品列表
			state.pagination.data = [];
			state.loadStatus = 'loading';
			console.log('左侧分类切换，重置右侧小分类为第一个');
		}
	});



		// 备用初始化函数（仅在主逻辑失败时使用）
	const initData = () => {
		// 延迟执行，给主逻辑足够的时间
		setTimeout(() => {
			try {
				if (!props.data || !props.data.children ||
					props.activeMenu === undefined || props.activeMenu === null) {
					return
				}

				const menuData = props.data.children[props.activeMenu]
				if (!menuData || !menuData.children ||
					!Array.isArray(menuData.children) || menuData.children.length === 0) {
					return
				}

				const categories = menuData.children
				const firstCategory = categories[0]

				if (!firstCategory || !firstCategory.id) {
					return
				}

				// 只有当还没有设置分类ID时才执行
				if (!state.categoryId) {
					state.categoryId = firstCategory.id
					state.tabIndex = 0
					state.pagination.data = []
					state.loadStatus = 'loading'
					console.log('备用初始化: 加载第一个分类:', firstCategory.name)
					getList()
				}
			} catch (error) {
				console.error('备用初始化失败:', error)
			}
		}, 500)
	}

	// 监听数据变化，自动加载第一个分类
	let isLoadingFirstCategory = false

	// 监听登录状态变化事件
	uni.$on('loginStatusChanged', () => {
		console.log('二级分类组件收到登录状态变化事件，更新用户信息')
		checkAndUpdateUserInfo()
	})

	// 获取用户信息
	const getUserInfo = async () => {
		try {
			// 检查是否已登录
			const isLogin = sheep.$store('user').isLogin;
			if (isLogin) {
				// 强制刷新用户信息，确保获取最新数据
				const userInfo = await sheep.$store('user').getInfo(true);
				state.userInfo = userInfo || {};
				console.log('二级分类组件获取到用户信息:', state.userInfo)
			} else {
				// 未登录时设置默认值
				state.userInfo = {
					level: 0,
					level_text: '普通用户'
				};
			}
		} catch (error) {
			console.error('获取用户信息失败:', error);
			// 出错时设置默认值
			state.userInfo = {
				level: 0,
				level_text: '普通用户'
			};
		}
	};

	watchEffect(async () => {
		// 防止重复调用
		if (isLoadingFirstCategory) return

		try {
			// 检查数据是否准备好
			if (!props.data || !props.data.children ||
				props.activeMenu === undefined || props.activeMenu === null) {
				return
			}

			const menuData = props.data.children[props.activeMenu]
			if (!menuData || !menuData.children ||
				!Array.isArray(menuData.children) || menuData.children.length === 0) {
				return
			}

			const categories = menuData.children
			const firstCategory = categories[0]

			if (!firstCategory || !firstCategory.id) {
				return
			}

			// 防止重复加载
			isLoadingFirstCategory = true

			// 先获取用户信息，确保价格显示正确
			await getUserInfo()

			// 延迟执行，避免初始化时的竞态条件
			setTimeout(() => {
				state.categoryId = firstCategory.id
				state.tabIndex = 0
				state.pagination.data = []
				state.loadStatus = 'loading'
				console.log('自动加载第一个分类:', firstCategory.name, 'ID:', firstCategory.id)
				getList()
				isLoadingFirstCategory = false
			}, 100)

		} catch (error) {
			console.error('自动加载第一个分类时发生错误:', error)
			isLoadingFirstCategory = false
		}
	})

	// 页面显示时也尝试初始化数据（作为备用）
	onShow(async () => {
		// 先获取最新用户信息
		await getUserInfo()
		initData()
		// 检查并更新用户信息
		checkAndUpdateUserInfo()
	})

	// 检查并更新用户信息
	const checkAndUpdateUserInfo = async () => {
		const currentLoginStatus = sheep.$store('user').isLogin;
		const currentUserLevel = state.userInfo?.level || 0;
		
		// 如果登录状态发生变化，或者用户信息不完整，则重新获取
		if (currentLoginStatus && (!state.userInfo || !state.userInfo.level)) {
			console.log('二级分类组件检测到登录状态变化，更新用户信息')
			await getUserInfo()
			// 如果用户是VIP，重新加载商品列表以显示VIP价格
			if (state.userInfo.level == 2) {
				console.log('二级分类组件检测到VIP用户，重新加载商品列表')
				await getList()
			}
		} else if (!currentLoginStatus && currentUserLevel > 0) {
			// 如果用户登出，重置用户信息
			console.log('二级分类组件检测到用户登出，重置用户信息')
			state.userInfo = {
				level: 0,
				level_text: '普通用户'
			}
			// 重新加载商品列表以显示普通价格
			await getList()
		}
		
		// 如果用户已登录且有用户信息，但商品列表已加载，检查是否需要重新加载
		if (currentLoginStatus && state.userInfo && state.userInfo.level && state.pagination.data.length > 0) {
			// 如果用户是VIP但商品列表可能显示的是普通价格，重新加载
			if (state.userInfo.level == 2) {
				console.log('二级分类组件检测到VIP用户，确保显示VIP价格')
				await getList()
			}
		}
	}

	// 获取商品列表
	async function getList() {
		try {
			state.loadStatus = 'loading';
			const res = await sheep.$api.goods.list({
				sort: '',
				order: '',
				category_id: state.categoryId,
				list_rows: 10,
				keyword: '',
				page: 1,
			});

			if (res.code === 1) {
				state.pagination.data = res.data.data || [];
				state.pagination.current_page = res.data.current_page || 1;
				state.pagination.total = res.data.total || 0;
				state.pagination.last_page = res.data.last_page || 1;

				if (state.pagination.current_page < state.pagination.last_page) {
					state.loadStatus = 'more';
				} else {
					state.loadStatus = 'noMore';
				}
			} else {
				state.loadStatus = 'error';
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				});
			}
		} catch (error) {
			state.loadStatus = 'error';
			console.error('获取商品列表失败:', error);
			uni.showToast({
				title: '网络异常，请重试',
				icon: 'none'
			});
		}
	}
	
	const emit = defineEmits(['goodsClick', 'showAddCart']);
	

	
	const goBuy = (val) => {
		state.isGift = val
		state.showSelectSku = true
	}
	const goGift = () => {
		let id = state.goodsId
		uni.navigateTo({
			url: `/subPackages/friendProductDetails/friendProductDetails?id=${id}`
		})
	}
	
	//营销活动
	function onActivity() {
		state.activityInfo = state.goodsInfo.promos;
		state.showActivityModel = true;
	}
	
	//立即领取
	async function onGet(id) {
		const { code, msg } = await sheep.$api.coupon.get(id);
		if (code === 1) {
			uni.showToast({
				title: msg,
			});
			setTimeout(() => {
				getCoupon();
			}, 1000);
		}
	}
	async function getCoupon(page = 1, list_rows = 5) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.coupon.userCoupon({
			type: state.type,
			list_rows,
			page,
		});
		if (res.code === 1) {
			let couponlist = _.concat(state.pagination.data, res.data.data);
			state.pagination = {
				...res.data,
				data: couponlist,
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	
	const shareInfo = computed(() => {
		if (isEmpty(state.goodsInfo)) return {};
		return sheep.$platform.share.getShareInfo({
			title: state.goodsInfo.title,
			image: sheep.$url.cdn(state.goodsInfo.image),
			desc: state.goodsInfo.subtitle,
			params: {
				page: '2',
				query: state.goodsInfo.id,
			},
		}, {
			type: 'goods', // 商品海报
			title: state.goodsInfo.title, // 商品标题
			image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
			price: state.goodsInfo.price[0], // 商品价格
			original_price: state.goodsInfo.original_price, // 商品原价
		}, );
	});
	
	
	const handleAdd = async (id) => {
		console.log('handleAdd 被调用，商品ID:', id);
		
		// 检查登录状态
		const isLogin = sheep.$store('user').isLogin;
		if (!isLogin) {
			uni.showModal({
				title: '温馨提示',
				content: '添加购物车请先登录',
				confirmText: '去登录',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/subPackages/login/login'
						})
					}
				}
			})
			return
		}

		try {
			// 获取商品详情
			const res = await sheep.$api.goods.detail(id);
			console.log('商品详情API响应:', res);
			
			if (res.code === 1) {
				state.goodsInfo = res.data;
				state.goodsId = id; // 设置商品ID
				state.isGift = 0; // 设置为非送好友模式
				
				// 向父组件发送显示SKU弹框事件
				emit('showSku', {
					goodsInfo: state.goodsInfo,
					goodsId: state.goodsId,
					isGift: state.isGift
				});
				
				console.log('获取商品详情成功:', res.data);
			} else {
				uni.showToast({
					title: res.msg || '获取商品信息失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取商品详情失败:', error);
			uni.showToast({
				title: '网络异常，请重试',
				icon: 'none'
			});
		}
	}

	

	

	



</script>

<style lang="scss" scoped>
	.page-container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.container-box {
		height: 100vh;
		background: #F8F8F8;
		display: flex;
		flex-direction: column;
		position: relative;
	}



	/* 内容区域样式 */
	.content-area {
		flex: 1;
		height: calc(100vh - 240rpx); /* 减去标签栏和标题栏的高度 */
		overflow-y: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
	}


	/* 分类标题样式 */
	.category-header {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 12rpx 20rpx 16rpx 20rpx;
		.category-title {
			font-size: 28rpx;
			font-weight: normal;
			color: #333333;
			/* 主分类标题，就像设计图中的"女装" */
		}

		.category-count {
			font-size: 24rpx;
			color: #999999;
		}
	}

	/* 横向滚动分类标签样式 */
	.category-scroll {
		width: 100%;
		white-space: nowrap;
		background: #F8F8F8;
		padding: 20rpx 0;
	}

	.category-tabs {
		display: flex;
		white-space: nowrap;
		align-items: center;
		padding: 0 20rpx;
		width: max-content;
	}

	.category-tab {
		flex-shrink: 0;
		margin-right: 20rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;

		&:last-child {
			margin-right: 0;
		}

		.tab-text {
			font-size: 28rpx;
			color: #333333;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			transition: all 0.3s ease;
			border-radius: 5rpx;
			background: #fff;
			font-weight: 500;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: max-content;
		}

		.tab-textActive {
			background: #FF7C00;
			color: #FFFFFF;
			font-weight: bold;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 5rpx;
			box-shadow: 0 2rpx 8rpx rgba(255, 124, 0, 0.3);
			padding: 0 30rpx;
			box-sizing: border-box;
			width: max-content;
		}
	}

	.title-box {

		.title-line-left,
		.title-line-right {
			width: 15px;
			height: 1px;
			background: #d2d2d2;
		}
	}


	.title-flex {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	/* 商品列表样式 */
	.goods-list {
		margin-bottom: 20rpx;
	}
	
	/* 商品列表中的标题样式 */
	.goods-list .goods-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
	}
	
	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		color: #666666;
		margin-top: 4rpx;
		white-space: nowrap;
	}
	.flex-center{
		display: flex;
		justify-content:space-between;
		align-items:center;
	}
	
	.add-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.goods-box {
		width: calc((100% - 20rpx) / 2);
		margin-bottom: 20rpx;
	
		.goods-img {
			width: 100%;
			height: 246rpx;
			border-radius: 10rpx 10rpx 0px 0px;
		}
	
		.goods-content {
			width: 100%;
			background: #ffffff;
			box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
			padding: 20rpx 16rpx 32rpx 16rpx;
			box-sizing: border-box;
			border-radius: 0 0 10rpx 10rpx;
	
			.goods-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
			}
	
			.goods-price {
				color: #FF7C00;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 40rpx;
				margin-right: 10rpx;
				white-space: nowrap;
				overflow: visible;
			}

			.price-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8rpx;
				flex-wrap: wrap;
				min-width: 0;
			}

			.original-price {
				color: #999999;
				font-size: 24rpx;
				text-decoration: line-through;
				line-height: 32rpx;
				white-space: nowrap;
				overflow: visible;
			}
		}
	
		&:nth-child(2n + 1) {
			margin-right: 20rpx;
		}
	}

	/* 加载状态样式 */
	.loading-status {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
	}

	.loading-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 16rpx;

		.loading-spinner {
			width: 32rpx;
			height: 32rpx;
			border: 3rpx solid #f0f0f0;
			border-top: 3rpx solid #ff7c00;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		text {
			font-size: 28rpx;
			color: #666666;
		}
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;

		text {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.error-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		cursor: pointer;

		text {
			font-size: 26rpx;
			color: #ff4444;
		}
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;

		.empty-text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	/* 错误状态样式 */
	.error-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

		.error-icon {
			font-size: 120rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
			color: #ff4444;
		}

		.error-text {
			font-size: 32rpx;
			font-weight: 600;
			color: #ff4444;
			margin-bottom: 16rpx;
		}

		.error-desc {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 40rpx;
		}

		.retry-btn {
			background: linear-gradient(135deg, #FF7C00 0%, #FF9500 100%);
			color: #ffffff;
			font-size: 28rpx;
			font-weight: 600;
			padding: 24rpx 48rpx;
			border-radius: 24rpx;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 4rpx 12rpx rgba(255, 124, 0, 0.3);

			&:hover {
				background: linear-gradient(135deg, #e67000 0%, #e68500 100%);
				transform: translateY(-2rpx);
				box-shadow: 0 6rpx 16rpx rgba(255, 124, 0, 0.4);
			}
			
			&:active {
				transform: translateY(0);
			}
		}
	}

	/* 返回顶部按钮样式 */
	.top-fixed {
		position: fixed;
		right: 30rpx;
		bottom: 300rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 998;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.9);
		}
		
		.backTop-img {
			width: 100rpx;
			height: 100rpx;
		}
	}

	/* SKU弹框样式 - 完全复制商品详情页面样式 */
	.sku-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 999999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		/* 苹果设备优化 */
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		/* 动画效果 */
		transition: background-color 0.3s ease;
		opacity: 0;
		visibility: hidden;
		
		&.show {
			background: rgba(0, 0, 0, 0.5);
			opacity: 1;
			visibility: visible;
		}
	}

	.ss-modal-box {
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;
		/* 优化高度计算，确保在所有设备上都能正确显示，包括底部按钮 */
		max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		/* 添加苹果设备兼容性 */
		-webkit-overflow-scrolling: touch;
		/* 确保内容不会超出屏幕 */
		overflow-x: hidden;
		/* 确保弹框在所有设备上都有足够的空间显示按钮 */
		min-height: 600rpx;
		/* 使用 flexbox 布局确保内容正确分布 */
		display: flex;
		flex-direction: column;
		/* 添加底部安全距离，确保弹框不会贴边 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		/* 确保弹框在左侧分类菜单之上 */
		position: relative;
		z-index: 1000000;
		/* 苹果设备硬件加速 */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		/* 动画效果 - 从底部滑入 */
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		
		&.show {
			transform: translateY(0);
			-webkit-transform: translateY(0);
		}

		.modal-header {
			position: relative;
			padding: 80rpx 20rpx 40rpx;

			.sku-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.header-right {
				height: 160rpx;
			}

			.close-btn {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				z-index: 10;
				transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				opacity: 0.8;
				transform: scale(0.9);

				.close-icon {
					font-size: 32rpx;
					color: #666;
					font-weight: 300;
					line-height: 1;
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
					transition: all 0.2s ease;
				}

				&:hover {
					background: rgba(0, 0, 0, 0.15);
					transform: scale(1.1);
					opacity: 1;
				}

				&:active {
					background: rgba(0, 0, 0, 0.2);
					transform: scale(0.95);
				}
			}

			.goods-title {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 42rpx;
			}

			.score-img {
				width: 36rpx;
				height: 36rpx;
				margin: 0 4rpx;
			}

			.score-text {
				font-size: 24rpx;
				color: #FF7C00;
				font-weight: 500;
			}

			// 价格样式 - 完全复制商品详情页面
			.price-text {
				font-size: 42rpx;
				font-weight: 500;
				color: #FF7C00;
				line-height: 30rpx;
				font-family: OPPOSANS;

				&::before {
					content: '￥';
					font-size: 30rpx;
				}
			}

			.origin-price-text {
				font-size: 26rpx;
				font-weight: 400;
				text-decoration: line-through;
				color: #999;
				font-family: OPPOSANS;

				&::before {
					content: '￥';
				}
			}

			.stock-text {
				font-size: 24rpx;
				color: #666;
			}
		}

		.modal-content {
			flex: 1;
			overflow: hidden;

			.modal-content-scroll {
				height: 100%;
				padding: 0 20rpx;
			}

			.sku-item {
				.label-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
				}

				.spec-btn {
					margin: 0 20rpx 20rpx 0;
					padding: 16rpx 32rpx;
					border: 2rpx solid #e5e5e5;
					border-radius: 8rpx;
					background: #fff;
					color: #333;
					font-size: 26rpx;
					transition: all 0.3s ease;

					&.ui-BG-Main-Gradient {
						background: linear-gradient(90deg, #FF7C00, #FF9500);
						border-color: #FF7C00;
						color: #fff;
					}

					&.disabled-btn {
						background: #f5f5f5;
						color: #ccc;
						border-color: #e5e5e5;
					}
				}
			}

			.buy-num-box {
				.label-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
				}
			}
		}

		.modal-footer {
			padding: 20rpx;
			background: #fff;

			// 购买按钮样式 - 完全复制商品详情页面
			.buy-box {
				.add-btn {
					width: 214rpx;
					height: 72rpx;
					font-weight: 500;
					font-size: 28rpx;
					border-radius: 40rpx 0 0 40rpx;
					background-color: var(--ui-BG-Main-light);
					color: var(--ui-BG-Main);
				}

				.buy-btn {
					width: 214rpx;
					height: 72rpx;
					font-weight: 500;
					font-size: 28rpx;
					border-radius: 0 40rpx 40rpx 0;
					background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
					color: #fff;
				}

				// 分类页专用按钮样式
				.add-btn-info {
					width: 100%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
				}
			}
		}
	}

	.mr20 {
		margin-right: 20rpx;
	}

</style>